<template>
  <view class="add-page" :style="objColor">
    <view class="page-title">绑定充电卡卡号：</view>
    <view class="input-box">
      <input class="input" v-model="cardNum" type="text" placeholder="请输入完整充电卡卡号" :maxlength="maxCardNum"
        @input="changeCardNum">
    </view>
    <!-- <view class="tips-box">
      <view class="tips-text">卡号长度为 {{ maxCardNum }} 位，不足请在前面补0</view>
      <view class="length-num">当前长度：{{ cardNum ? cardNum.length : 0 }}</view>
    </view> -->
    <view v-if="isAddLoading" class="submit-btn none-btn">正在绑定中，请稍候...</view>
    <view v-else class="submit-btn" @click="bindCard">确认绑定</view>
  </view>
</template>

<script>
import { addCard } from '../../api/card'

export default {
  data() {
    return {
      cardNum: '', // 输入框卡号
      submitCardNum: '', // 提交卡号
      maxCardNum: 16, // 输入长度
      isAddLoading: false,
    }
  },

  methods: {
    // 输入限制
    changeCardNum(event) {
      const regex = /^[a-zA-Z0-9]*$/; // 英文+数字
      const value = event.detail.value;
      this.$nextTick(() => {
        if (!regex.test(value)) {
          this.cardNum = value.replace(/[^a-zA-Z0-9]/g, '');
        } else {
          this.cardNum = value;
        }
      })
    },

    // 确认添加
    bindCard() {
      if (!this.cardNum) {
        uni.showToast({
          title: '请输入卡号',
          icon: 'none'
        })
        return
      } else if (this.cardNum.length < this.maxCardNum) {
        // uni.showToast({
        //   title: `卡号长度必须${this.maxCardNum}位`,
        //   icon: 'none'
        // })
        const tempStr = this.cardNum
        this.submitCardNum = tempStr.padStart(16, '0');

        uni.showModal({
          title: '提示',
          content: `检测到卡号不足${this.maxCardNum}位，系统将为你默认在前面用0补齐，具体卡号为【${this.submitCardNum}】`,
          confirmText: '确认',
          success: (res) => {
            if (res.confirm) {
              this.onSubmitAddCard()
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
        return
      }

      this.submitCardNum = this.cardNum
      this.onSubmitAddCard()
    },

    // 提交-添加卡
    onSubmitAddCard() {
      if (this.isAddLoading) return

      this.isAddLoading = true
      uni.showLoading({
        title: '添加中...',
        mask: true
      })

      // 添加卡
      addCard({
        number: this.submitCardNum
      }).then(res => {
        const { code, msg } = res
        if (code === 0) {
          uni.showToast({
            title: '添加成功',
            icon: 'none'
          })
          setTimeout(() => {
            this.isAddLoading = false
            uni.navigateBack()
          }, 1500)
        } else {
          this.isAddLoading = false
          uni.showToast({
            title: msg,
            icon: 'none'
          })
        }
      }).catch(err => {
        this.isAddLoading = false
        console.error(err);
      }).finally(() => {
        uni.hideLoading()
      })
    }
  }
}
</script>

<style lang='less' scoped>
.add-page {
  padding: 0 32rpx;

  .page-title {
    font-size: 40rpx;
    font-weight: bold;
    margin-top: 48rpx;
  }

  .input-box {
    height: 88rpx;
    margin-top: 42rpx;
    border-bottom: 1rpx solid #ccc;

    .input {
      width: 100%;
      height: 100%;
      padding: 0;
      box-sizing: border-box;
    }
  }


  .tips-box {
    display: flex;
    justify-content: space-between;
    margin-top: 12rpx;

    .tips-text {
      // color: #f44336;
      color: #ff9800;
      font-size: 28rpx;
    }

    .length-num {
      font-size: 28rpx;
      color: #999;
      text-align: right;
      flex-shrink: 0;
      margin-left: 12rpx;
    }
  }

  .submit-btn {
    width: 100%;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #fff;
    border-radius: 12rpx;
    background: var(--btnColor);
    margin: 108rpx auto 0;
    box-sizing: border-box;
  }

  .none-btn {
    background: #b4b4b4;
  }
}
</style>
